<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>商城 - 首页</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<div class="container">
    <h1 class="mt-5">订单录入页面</h1>
    <div id="message"></div>
    <form id="order-form">
        <div class="form-group">
            <label for="order_number">订单号：</label>
            <input type="text" class="form-control" id="order_number" name="order_number" required>
        </div>
        <button type="submit" class="btn btn-primary">提交订单</button>
    </form>
    <br>
    <a href="{{ url_for('page2') }}">查看订单统计图表</a>
</div>
<script>
$(document).ready(function() {
    $('#order-form').submit(function(event) {
        event.preventDefault(); // 阻止表单默认提交
        var order_number = $('#order_number').val();
        $.ajax({
            url: '/api/orders',
            type: 'POST',
            data: { order_number: order_number },
            success: function(response) {
                $('#message').html('<div class="alert alert-success">' + response.message + '</div>');
                $('#order_number').val(''); // 清空输入框
            },
            error: function(xhr) {
                var error = xhr.responseJSON.error;
                $('#message').html('<div class="alert alert-danger">' + error + '</div>');
            }
        });
    });
});
</script>
</body>
</html>
